<template>
  <div class="app-main-container">
    <div id="echarts" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  props: {
    filters: {
      type: Object,
      default: () => { }
    },
    list: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    getChartData() {
      var chartDom = document.getElementById('echarts')
      var myChart = echarts.init(chartDom)
      var option
      const dataList = this.list
      option = {
        xAxis: {
          type: 'category',
          data: dataList.map((item) => { return item.time })
        },
        tooltip: {
          trigger: 'axis'
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: this.translate('jin'),
            type: 'line',
            stack: 'Total',
            data: dataList.map((item) => { return item.totlEntries })
          },
          {
            name: this.translate('chu'),
            type: 'line',
            stack: 'Total',
            data: dataList.map((item) => { return item.totlOut })
          }
        ]
      }

      option && myChart.setOption(option)
    }
  }
}
</script>
<style scoped lang="scss">
#echarts {
  width: 100%;
  height: 500px;
}
</style>
